<template>
	<view class="order" @click=" moreviewindex = false">
		<MyService v-show="showservice" :showservice="showservice" @showserviceview="showserviceview"></MyService>
		<scroll-view scroll-x="true" scroll-with-animation="true" :scroll-into-view="choosetabar">
			<view class="order-top">
				<view class="order-top-title" v-for="(item,index) in tabs" :key="index"
					@click="choosetype(index,item.id)" :id="tabarid(index)">
					<view class="order-top-title-text">
						<text style="font-size: 32rpx;" :class="{suretitle : sureline == index}">{{item.title}}</text>
					</view>
					<view :class="{line : sureline == index}"></view>
				</view>
			</view>
		</scroll-view>
		<view class="order-nomore" v-if="orderlist.length==0">
			<view class="order-nomore-img">
				<image src="../static/order/empty.png" style="margin-bottom: 40rpx;" mode="widthFix"></image>
				<text
					style="font-size: 24rpx; color: #7f7f7f; width: 100%; display: flex; justify-content: center;">你还没有相关订单</text>
				<view class="order-nomore-botton" @click="ToIndex()">
					<text style="font-size: 32rpx; color: white;">去逛逛</text>
				</view>
			</view>
		</view>
		<view class="order-list-part-connet" v-for="(item,index) in orderlist" :key="index" v-if="orderlist.length >0">
			<view class="order-list-part-connet-top">
				<view class="order-list-part-connet-left" @click="ToShop()">
					<image src="../static/order/shop-icon.png"
						style="width: 48rpx; height: 48rpx; margin-left: 20rpx;margin-right: 20rpx;"></image>
					<text>{{item.shopname}}</text>
				</view>
				<view class="order-list-part-connet-right">
					<text style="margin-right: 20rpx;">{{item.order_status_name}}</text>
				</view>
			</view>
			<view class="order-list-part-connet-connet" @click="ToOrderdetail()">
				<view class="order-list-part-connet-connet-img">
					<image :src="imgurl+item.imgurl" mode="widthFix" style="width: 160rpx;height: 160rpx;">
					</image>
				</view>
				<view class="order-list-part-connet-connet-connet">
					<view class="order-list-part-connet-connet-connet-title">
						<text>{{item.goods_title}}</text>
					</view>
					<view class="order-list-part-connet-connet-connet-part">
						<text>套餐：{{item.setmeal_title}}</text>
					</view>
					<view class="order-list-part-connet-connet-connet-part">
						<text>租期：{{item.lease_time}}</text>
					</view>
					<view class="order-list-part-connet-connet-connet-bottom">
						<text>总租金：{{item.rent_total}}</text>
						<text style="margin-right: 20rpx;">x{{item.amount}}</text>
					</view>
				</view>
			</view>
			<view class="order-list-part-connet-bottom">
				<view class="order-list-part-connet-bottom-more" v-show="type == 1">
					<text style="margin-left: 30rpx;" @click="more(index)" @click.stop="()=>{}" class="more">更多</text>
				</view>
				<view class="order-list-part-connet-bottom-button" v-show="type == 1">
<!-- 				<view class="order-list-part-connet-bottom-button" v-show="type == 1" @click="ToBuyout()"> -->
					<view class="order-button" v-if="false">
						<text>申请买断</text>
					</view>
					<view class="order-button" @click="guihuai()">
						<text>申请归还</text>
					</view>
					<view class="order-button">
						<text>支付租金</text>
					</view>
				</view>
				<view class="order-list-part-connet-bottom-button" v-show="type == 2">
					<view class="order-button" @click="showmore()">
						<text>联系客服</text>
					</view>
					<view class="order-button" style="background-color: red; color: white; border:red solid 2rpx">
						<text>再次下单</text>
					</view>
				</view>
			</view>
			<view class="order-more-model" v-show="moreviewindex === index" @click.stop>
				<view class="order-more-model-top">
					<view class="order-more-model-list" style=" border-radius:12rpx 12rpx 0 0;" @click="ToLogistics()">
						<text>查看物流</text>
					</view>
					<view class="order-more-model-list"
						style="border-top: #ededed 2rpx solid; border-radius: 0 0 12rpx 12rpx;" @click="showmore()">
						<text>联系客服</text>
					</view>
					<view class="order-more-model-top-sanjiao"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tabs,
		orderBtns
	} from "@/common/order/index.js"
	export default {
		data() {
			return {
				imgurl: this.$imgURL2,
				tabs,
				orderBtns,
				sureline: 0,
				choosetabar: '',
				type: 1, //0-2
				moreview: false,
				showservice: false,
				moreviewindex: -1,
				orderlist: {},
				i: 0,
				choosed: '',
				userinfo: {},
			}
		},
		onLoad(type) {
			this.inspectToken(type);
		},
		methods: {
			inspectToken(type) {
				const userinfo = uni.getStorageSync("userinfo");
				if (typeof userinfo === "object" && userinfo.token) {
					this.userinfo = userinfo;
					this.sure(type);
				} else {
					this.showLoginTips();
				}
			},
			showLoginTips() {
				uni.showModal({
					title: '提示',
					content: '您还未授权登录或已过期，将为您跳转至用户页面，请点击头像登录',
					showCancel: false,
					success(event) {
						if (event.confirm) {
							uni.switchTab({
								url: '/pages/user/user'
							})
						}
					}
				})
			},
			ToBuyout() {
				uni.navigateTo({
					url: '/pagesA/buyout/buyout'
				})
			},
			guihuai() {
				uni.showModal({
					title: '订单未到期！',
					content: '该商品允许提前归还，是否确认申请提前归还?\n归还后已缴付的租金不再退还，如有疑问请联系商家',
					cancelText: '取消申请',
					confirmText: '确定申请',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			showmore() {
				this.showservice = true,
					this.moreviewindex = -1,
					console.log(this.moreviewindex)
			},
			showserviceview(e) {
				this.showservice = false
			},
			ToLogistics() {
				uni.navigateTo({
					url: '/pagesA/logistics/logistics'
				})
			},
			more(index) {
				this.moreviewindex = index
				this.moreview = true
				console.log(this.moreview, this.moreviewindex)
			},
			ToOrderdetail() {
				uni.navigateTo({
					url: '/pagesA/orderdetail/orderdetail'
				})
			},
			tabarid(index) {
				return 'tabar' + index
			},
			choosetype(index, id) {
				this.choosed = id
				this.sureline = index
				uni.request({
					url: this.$apiUrl + 'Order/orderList',
					method: 'POST',
					header: {
						token: this.userinfo.token
					},
					data: {
						page: 1,
						pageSize: 10,
						order_status: this.choosed
					},
					complete: (e) => {
						console.log(e)
						this.orderlist = e.data.data.data
					}
				})
			},
			ToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			sure(e) {
				if (e.type) {
					this.sureline = e.type
					this.choosetabar = 'tabar' + e.type
					uni.request({
						url: this.$apiUrl + "Order/orderList",
						// url: 'https://testtxxzdata.tingxiangzu.com/Douyin/Order/orderList',
						method: 'POST',
						header: {
							token: this.userinfo.token
						},
						data: {
							page: 1,
							pageSize: 1000,
							order_status: this.tabs[e.type].id
						},
						complete: (res) => {
							if (res.data.status === 300) {
								uni.removeStorageSync("userinfo");
								this.showLoginTips();
							} else {
								this.orderlist = res.data.data.data
							}
						}
					})
				} else {
					this.sureline = 0
				}
			},
			ToShop() {
				uni.navigateTo({
					url: '/pagesA/shop/shop'
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}

	.order {
		width: 100%;
	}

	.order-top {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		background-color: white;
	}

	.order-top-title {
		width: 180rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
		background-color: white;
	}

	.order-top-title-text {
		width: 140rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line {
		width: 80%;
		height: 4rpx;
		position: relative;
		bottom: 0;
		background-color: red;
		animation: line 0.3s;
		margin: auto;
	}

	.suretitle {
		font-weight: bold;
		color: red;
	}

	@keyframes line {
		from {
			width: 0%;
		}

		to {
			width: 80%;
		}
	}

	.order-nomore {
		width: 100%;
		height: calc(100% - 90rpx);
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.order-nomore-img {
		width: 700rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.order-nomore-botton {
		background-color: red;
		width: 200rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 32rpx;
		margin-top: 40rpx;
	}

	/* 	.order-list{
		width: 100%;
		height: 100%;
		background-color: aqua;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.order-list-part{
		width: 90%;
		height: 100%;
		background-color: beige;
		margin: auto;
	} */
	.order-list-part-connet {
		width: 90%;
		height: 400rpx;
		margin: auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 24rpx;
	}

	.order-list-part-connet-top {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
	}

	.order-list-part-connet-left {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
	}

	.order-list-part-connet-right {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 32rpx;
		color: gold;
	}

	.order-list-part-connet-connet {
		width: 100%;
		height: 240rpx;
		display: flex;
		justify-content: center;
		border-bottom: #f7f7f7 solid 2rpx;
		border-top: #f7f7f7 solid 2rpx;
	}

	.order-list-part-connet-connet-img {
		width: 160rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order-list-part-connet-connet-connet {
		width: calc(100% - 160rpx);
		height: 100%;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		align-content: center;
	}

	.order-list-part-connet-connet-connet-title {
		width: 96%;
		height: 50rpx;
		font-size: 28rpx;
	}

	.order-list-part-connet-connet-connet-part {
		width: 96%;
		height: 30rpx;
		font-size: 24rpx;
		color: #7f7f7f;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.order-list-part-connet-connet-connet-bottom {
		width: 96%;
		height: 50rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.order-list-part-connet-bottom {
		width: 100%;
		height: 74rpx;
		display: flex;
		justify-content: flex-end;
	}

	.order-list-part-connet-bottom-more {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		color: #7f7f7f;
	}

	.order-list-part-connet-bottom-button {
		width: 80%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.order-button {
		width: 140rpx;
		height: 60%;
		font-size: 24rpx;
		color: #7f7f7f;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 32rpx;
		border: #7f7f7f solid 2rpx;
		margin-right: 20rpx;
	}

	.order-more-model {
		width: 200rpx;
		height: 150rpx;
		position: relative;
		top: -196rpx;
	}

	.order-more-model-top {
		width: 100%;
		height: 30rpx;
		background-color: bisque;
	}

	.order-more-model-top-sanjiao {
		width: 0px;
		height: 0px;
		border: 24rpx solid transparent;
		border-top-color: #333333;
		position: relative;
		left: 18%;
	}

	.order-more-model-list {
		width: 100%;
		height: 60rpx;
		background-color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 28rpx;
	}
</style>
